<div id="modals">
    <!--<div class="modal fade" id="modal-add"  role="basic" aria-hidden="true">-->
        <!--<div class="modal-dialog">-->
            <!--<div class="modal-content">-->
                <!--<div class="modal-header">-->
                    <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>-->
                    <!--<h4 class="modal-title">添加</h4>-->
                <!--</div>-->
                <!--<div class="modal-body">-->
                    <!--<form action="javascript:;" method="post">-->
                        <!--<table class="table table-striped table-bordered " width="100%">-->
                            <!--<tr>-->
                                <!--<th>商品编号</th>-->
                                <!--<td><input  class="form-control " type="text" name="goodsNo" value=""></td>-->
                            <!--</tr>-->
                            <!--<tr>-->
                                <!--<th>商品分类</th>-->
                                <!--<td>-->
                                    <!--<select class="form-control  input-medium inline"  name="typeId"></select>-->
                                    <!--<input type="hidden" name="type" data-ref="typeId"/>-->
                                <!--</td>-->
                            <!--</tr>-->
                            <!--<tr>-->
                                <!--<th>商品名称</th>-->
                                <!--<td><input type="text"  class="form-control "  name="goodsName" value=""></td>-->
                            <!--</tr>-->
                            <!--<tr>-->
                                <!--<th>商品Logo</th>-->
                                <!--<td>-->
                                    <!--<div class="pull-left">-->
                                        <!--<input type="file" class="hidden">-->
                                        <!--<a href="javascript:;" style="width: 100px;height: 100px;" class="btn-upload">-->
                                            <!--<span>选择图片</span>-->
                                            <!--<img name="img" src="" width="100" height="100">-->
                                        <!--</a>-->
                                        <!--<input type="hidden" name="img" value=""/>-->
                                        <!--<p><span class="required-star">* 建议尺寸：220*220px，大小不超过150k</span></p>-->
                                    <!--</div>-->
                                <!--</td>-->
                            <!--</tr>-->
                            <!--<tr>-->
                                <!--<th>商品价格</th>-->
                                <!--<td><input type="number"  class="form-control  input-small inline"  name="price" min="0.01" max="2000" step="0.1"></td>-->
                            <!--</tr>-->
                            <!--<tr>-->
                                <!--<th>商品状态</th>-->
                                <!--<td>-->
                                    <!--<input type="checkbox" name="isShow" value="1" />-->
                                <!--</td>-->
                            <!--</tr>-->
                        <!--</table>-->
                    <!--</form>-->
                <!--</div>-->
                <!--<div class="modal-footer">-->
                    <!--<button type="submit" class="btn dark green btn-save radius6"><i class="fa fa-save"></i> 保存  </button>-->
                    <!--<button type="button" class="btn dark btn-outline radius6" data-dismiss="modal"><i  class="fa fa-close"></i> 关闭 </button>-->
                <!--</div>-->
            <!--</div>-->
            <!--&lt;!&ndash; /.modal-content &ndash;&gt;-->
        <!--</div>-->
        <!--&lt;!&ndash; /.modal-dialog &ndash;&gt;-->
    <!--</div>-->
    <!--<div class="modal fade" id="modal-edit" role="basic" aria-hidden="true">-->
        <!--<div class="modal-dialog">-->
            <!--<div class="modal-content">-->
                <!--<div class="modal-header">-->
                    <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>-->
                    <!--<h4 class="modal-title">修改</h4>-->
                <!--</div>-->
                <!--<div class="modal-body">-->
                    <!--<form action="javascript:;" method="post">-->
                        <!--<input type="hidden" name="id" value=""/>-->
                        <!--<table class="table table-striped table-bordered " width="100%">-->
                            <!--<tr>-->
                                <!--<th style="width: 80px;">商品编号</th>-->
                                <!--<td><input type="text" class="form-control" name="goodsNo" max="32" value=""></td>-->
                            <!--</tr>-->
                            <!--<tr>-->
                                <!--<th>商品分类</th>-->
                                <!--<td>-->
                                    <!--<select name="typeId"  class="form-control  input-medium inline" ></select>-->
                                    <!--<input type="hidden" name="type" data-ref="typeId"/>-->
                                <!--</td>-->
                            <!--</tr>-->
                            <!--<tr>-->
                                <!--<th>商品名称</th>-->
                                <!--<td><input type="text" class="form-control" name="goodsName" max="64" value=""></td>-->
                            <!--</tr>-->
                            <!--<tr>-->
                                <!--<th>商品Logo</th>-->
                                <!--<td>-->
                                    <!--<div class="pull-left">-->
                                        <!--<input type="file" class="hidden">-->
                                        <!--<a href="javascript:;" style="width: 100px;height: 100px;" class="btn-upload">-->
                                            <!--<span>选择图片</span>-->
                                            <!--<img name="img" src="" width="100" height="100">-->
                                        <!--</a>-->
                                        <!--<input type="hidden" name="img" value=""/>-->
                                        <!--<p><span class="required-star">* 建议尺寸：220*220px，大小不超过150k</span></p>-->
                                    <!--</div>-->
                                <!--</td>-->
                            <!--</tr>-->
                            <!--<tr>-->
                                <!--<th>商品价格</th>-->
                                <!--<td><input type="number" name="price"class="form-control input-small inline" min="0.01" max="2000" step="0.1"></td>-->
                            <!--</tr>-->
                            <!--<tr>-->
                                <!--<th>商品状态</th>-->
                                <!--<td>-->
                                    <!--<input type="checkbox"  name="isShow" value="1" />-->
                                    <!--<p><span class="required-star">* 请注意：  将商品修改为下架，如果该商品已被添加到活动内，它将会被移除，再次上架时需在对应的活动内重新确认相关信息并添加。</span>-->
                                    <!--</p>-->
                                <!--</td>-->
                            <!--</tr>-->

                        <!--</table>-->
                    <!--</form>-->
                <!--</div>-->
                <!--<div class="modal-footer">-->
                    <!--<button type="submit" class="btn dark green btn-save radius6"><i class="fa fa-check"></i> 保存  </button>-->
                    <!--<button type="button" class="btn dark btn-outline radius6" data-dismiss="modal"><i  class="fa fa-close"></i> 关闭 </button>-->
                <!--</div>-->
            <!--</div>-->
            <!--&lt;!&ndash; /.modal-content &ndash;&gt;-->
        <!--</div>-->
        <!--&lt;!&ndash; /.modal-dialog &ndash;&gt;-->
    <!--</div>-->

    <div class="modal fade" id="modal--img-view" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">预览</h4>
                </div>
                <div class="modal-body" style="text-align: center">
                    <img src="" alt="" width="220px;"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline radius6" data-dismiss="modal"><i  class="fa fa-close"></i> 关闭 </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>
<div class="row">
    <div class="top-handle-btn">
        <form id="search-form" action="javascript:;">
            每页显示：<input name="pageSize" class="form-control  input-small inline" type="number" min="2" max="50" style="width: 80px;"
                        value="10"/>
            <select name="typeId" class=" input-medium form-control inline " >
                <option value="">商品分类</option>
            </select>
            <input type="text " name="goodsName" class="form-control input-small inline"  placeholder="输入商品名称查询"/>
            <button class="btn purple right search radius6" ><i class="fa fa-search"></i> 查询</button>
            <button class='btn green radius6' data-toggle='modal' href='#modal-add' ><i class="fa fa-plus"></i> 添加</button>
        </form>
    </div>
</div>

<div class="row">
    <table id="data-table" class="table table-striped table-bordered table-hover" width="100%">
        <thead>
        <tr>
            <th>商品编号</th>
            <th>商品分类</th>
            <th>商品名称</th>
            <th>LOGO</th>
            <th>销售价(元)</th>
            <th>修改时间</th>
            <th>创建时间</th>
            <th>商品状态</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
        </tfoot>
    </table>
</div>

<script type="text/javascript">
    var state ="/goods";
    $(function () {
        registerImageUploadComponent();
        $("select").select2();
        DataTable.init({
            url: state,//ajax请求url
            tableName: "data-table",//数据表table id
            paramsFormName: "search-form",//查询参数form id
            modal: "modals",//模态框div
            columns: [//列对应的字段数组，注意顺序
                {data: "goodsNo"},
                {data: "typeId", visible: false},
                {data: "type"},
                {data: "goodsName"},
                {data: "img", type: 'img', view: "modal--img-view"},
                {data: "price"},
                {data: "updateTime", type: "datetime"},
                {data: "createTime", type: "datetime"},
                {
//                    修改为下架，如果该商品已被添加到活动内，它将会被移除，再次上架时需在对应的活动内重新确认相关信息并添加
//                    点击可修改为上架
                    data: "isShow",
                    convert: "1=> <input type='checkbox' class='ck-sw' data-size='small' checked >" +
                    "|0=><input class='ck-sw'   type='checkbox' data-size='small'>"
                },
            ],
            options: [//操作区域(id)
                {
                    icon:"fa fa-edit",
                    name: "编辑",
                    color: "green",
                    option: "modal-edit",
                    edit: true,
                    editMain: true,
//                    visible: false,
                    url: state,
                },
                {
                    icon:"fa fa-remove",
                    name: "删除",
                    color: "red",
                    del: state,
                },
            ],
            handles: {
                insert: [
                    {url: state, modalId: "modal-add"},
                ],
            },
            endFnOnce: "loadTypes",
            endFn: "registerSwitchClick"
        });
    });

    function setShow(obj, v) {
        var id = $(obj).parents("tr").attr("data-id");
        var goodsName = $(obj).parents("tr").find("td[data-name=goodsName]").html();
        bootbox.confirm("确定要将商品[" + goodsName + "]" + (v == 1 ? "上架？" : "下架？如果该商品已被添加到活动内，它将会被移除，再次上架时需在对应的活动内重新确认相关信息并添加，点击确定继续") + "", function (result) {
            if (result) {
                Shinez.put(state+"/"+id+"/show", {isShow: v, id: id}, function (ret) {
                    if(ret.status==0) {
                        showTip("success", "操作成功");
                        obj.bootstrapSwitch("state",v,true);
                    }else{
                        showTip("danger",ret.info);
                    }
                });
            }
        });
//        var isShow = $(obj).parents("tr").find("td[data-name=isShow]").attr("data-value");

    }


    function registerSwitchClick() {
        $('.ck-sw').on('switchChange.bootstrapSwitch', function (e, state) {
            var $this = $(this);
            $this.bootstrapSwitch('state', !state, true);
            setShow($this, state);
        });
    }


    function loadTypes(data) {
        var specs = data.types;
        $.each(specs, function (k, v) {
            $("select[name=typeId]").append("<option value='" + v.id + "'>" + v.type + "</option>");
        });
    }


</script>